<template>
  <div class="c-bg-white c-pb24">
    <div class="c-flex-row c-aligni-center c-ph24 c-pt24 c-bg-white">
      <div class="c-ww8 c-hh20 theme-bg c-br4"></div>
      <div class="c-fs26 c-fc-xblack c-ml10">邀约数据</div>
    </div>
    <div class="c-flex-row c-aligni-center c-ph24 c-pv24 c-justify-sb c-textAlign-c c-bg-white">
      <div class="c-flex-grow1">
        <div class="c-fs36 c-fc-xblack c-fw600">{{ total }}</div>
        <div class="c-fs20 c-fc-xblack c-pt8">累计邀约(人)</div>
      </div>
      <div class="c-flex-grow1">
        <div class="c-fs36 c-fc-xblack c-fw600">{{ todayCount }}</div>
        <div class="c-fs20 c-fc-xblack c-pt8">今日邀约(人)</div>
      </div>
      <div class="c-flex-grow1">
        <div class="c-fs36 c-fc-xblack c-fw600">{{ monthCount }}</div>
        <div class="c-fs20 c-fc-xblack c-pt8">本月邀约(人)</div>
      </div>
    </div>
    <div class="c-bg-sgray c-pt12"></div>
    <div class="c-flex-row c-aligni-center c-justify-sb c-ph24 c-bg-white c-pt24 c-pb28">
      <div class="c-flex-row c-aligni-center">
        <div class="c-ww8 c-hh20 theme-bg c-br4"></div>
        <div class="c-fs26 c-fc-xblack c-ml10">邀约记录</div>
      </div>
      <div class="c-flex-row c-aligni-center c-fs22 c-ph20 c-pv8 c-bg-f2 c-br24" v-show="selectList.length > 0">
        <popup-picker cancel-text="取消" confirm-text="确定" :themeColor="$getThemeColor()" class="selectPicker c-mr10" title="" style="c-w100" v-model="selectItem" :data="selectList" @on-change="clickChooseSort"></popup-picker>
        <span class="iconfont c-fs18 c-fc-xblack c-rotate180">&#xe6ab;</span>
      </div>
    </div>
    <div class="c-bg-white">
      <div class="c-content-scroll c-maxh720" id="J_ranklist-scroll" @scroll="rankListScroll">
        <div v-for="(item,index) in liveList" :key="index" class="c-flex-row c-ph24 c-w100 c-justify-sb c-pb30">
          <div class="c-flex-row">
            <img :src="$addXossFilter(item.headimgurl,require('@/assets/defult_head.png'))" class="c-ww72 c-hh72 c-brp50" alt="" />
          </div>
          <div class="c-flex-grow1 c-ml16">
            <div class="c-fs26 c-fc-xblack c-text-ellipsis1 c-ww500">{{item.userNickName}}</div>
            <div class="c-fs22 c-fc-xblack c-fc-gray c-mt4">ID:{{item.iuId}}</div>
            <div class="c-fs22 c-ww500 c-text-ellipsis1 c-fc-gray c-mt4">{{item.cTime}}  邀请进入{{item.name}}直播间</div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" noDataText="暂无邀请记录"></loading-status-tem>
      </div>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index';
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: "MyLiveList",
  components: {
    loadingStatusTem,
    PopupPicker
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      liveList: [],
      selectIndex: 0,
      selectList: [["近七天", "本月", "今年", "全部"]],
      selectItem:[],
      sortType:3, //排序方式
      monthCount:0,
      todayCount:0,
      total:0,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    rankListScroll() {
      let element = document.getElementById('J_ranklist-scroll');
      utilJs.elementLoading(element, () => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.liveList.length > 0) {
          this.getLiveList();
        }
      })
    },
    //选择排序
    clickChooseSort(value) {
      this.selectItem = value;
      // timeType	1-今天；2-本月；3-近7天；4-今年
      if (this.selectItem == '近七天') {
        this.sortType = 3;
      } else if (this.selectItem == '本月') {
        this.sortType = 2;
      } else if (this.selectItem == '今年') {
        this.sortType = 4;
      } else if (this.selectItem == '全部') {
        this.sortType = '';
      }
      pageIndex = 1;
      let element = document.getElementById('J_ranklist-scroll');
      element.scrollTop = 0;
      this.getLiveList();
    },
    getLiveList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(
        global.apiurl + "liveFlow/getLiveInviteRecords?timeType=" + this.sortType + "&page=" + pageIndex + '&limit=' + LIMIT,
        res => {
          if (pageIndex == 1) {
            this.liveList = res.list.data;
          } else {
            this.liveList = [...this.liveList, ...res.list.data];
          }
          this.monthCount = res.monthCount
          this.todayCount = res.todayCount
          this.total = res.total
          if (res.list && (res.list.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.list.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的邀约记录", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的邀约记录", "", shareUrl, "");
    },
    initData() {
      this.selectItem = (this.selectList.length > 0 && [this.selectList[0][0]]) || []
      pageIndex = 1;
      this.sortType = 3, //排序方式
      this.dataStatus = 'HAS_MORE_DATA';
      this.liveList = [];
      this.getLiveList();
    },
  },
  activated() {
    setDocumentTitle("我的邀约记录");
    this.initData()
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
.inva-bg{
  background: url("../../../assets/i/wap/live/invaitBg.png") no-repeat;
  min-height: 21.05rem;
  background-size: 100%;
}
.tab-list {
  padding: 0.15rem;
  li {
    width: 2.5rem;
    height: 1.1rem;
    &.active {
      background: #fff;
      border-radius: 0.75rem;
    }
  }
}
.c-pt296{
  padding-top:7.4rem;
}
.c-ml84{
  margin-left: 2.1rem;
}
.rules-entry {
  position: absolute;
  right: 0;
  top: 0.75rem;
  background: #ffffff1a;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-radius: 0.5rem 0 0 0.5rem;
  width: 3.2rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
}
.selectPicker  /deep/  .vux-cell-value {
  color: #333 !important;;
}
</style>
